// 定义全局变量，用于存储不同类型的图表实例
let healthChart;
let diabetesChart;
let radarChart;

// 获取不同图表的 2D 绘图上下文，用于后续绘制图表
const ctx = document.getElementById('healthChart').getContext('2d');
const diabetesCtx = document.getElementById('diabetesChart').getContext('2d');
const radarCtx = document.getElementById('radarChart').getContext('2d');

// 当前显示的页码，初始为第 1 页
let currentPage = 1;
// 存储数据的总记录数，初始为 0
let totalRecords = 0;
// 每页显示的记录数量
const recordsPerPage = 10;

// 页面加载完成后，异步执行数据获取和图表绘制操作
window.onload = async () => {
    // 获取所有历史记录数据
    await fetchAllRecords();
    // 获取糖尿病患者和正常患者的统计数据
    await fetchDiabetesStats();
    // 获取正常患者和糖尿病患者各项指标的均值数据
    await fetchDiabetesMeans();
};

// 根据日期和当前页码获取历史记录数据
function fetchRecords() {
    // 获取日期选择器的值
    const date = document.getElementById('date-picker').value;
    // 构建请求 URL，传递日期和当前页码参数
    const url = `/history_data?date=${date}&page=${currentPage}`;
    // 发送请求获取数据
    fetch(url)
        // 将响应数据解析为 JSON 格式
       .then(response => response.json())
       .then(data => {
            // 更新历史记录表格
            updateHistoryTable(data.records);
            // 存储总记录数
            totalRecords = data.total_records;
            // 更新分页信息
            updatePagination();
            // 准备用于绘制图表的数据
            prepareChartData(data.records);
        });
}

// 重新获取记录以更新图表
function updateChart() {
    fetchRecords();
}

// 获取所有历史记录数据
function fetchAllRecords() {
    // 构建请求 URL，只传递当前页码参数
    const url = `/history_data?page=${currentPage}`;
    // 发送请求获取数据
    fetch(url)
        // 将响应数据解析为 JSON 格式
       .then(response => response.json())
       .then(data => {
            // 更新历史记录表格
            updateHistoryTable(data.records);
            // 存储总记录数
            totalRecords = data.total_records;
            // 更新分页信息
            updatePagination();
            // 准备用于绘制图表的数据
            prepareChartData(data.records);
        });
}

// 根据患者 ID 获取特定患者的记录数据
function fetchPatientRecords() {
    // 获取患者身份证号输入框的值
    const idcard = document.getElementById('idcard').value;
    // 构建请求 URL，传递患者 ID 参数
    const url = `/patient_data?idcard=${idcard}`;
    // 发送请求获取数据
    fetch(url)
        // 将响应数据解析为 JSON 格式
       .then(response => response.json())
       .then(data => {
            // 更新历史记录表格
            updateHistoryTable(data.records);
            // 更新总记录数为返回的记录数量
            totalRecords = data.records.length;
            // 更新分页信息
            updatePagination();
            // 准备用于绘制图表的数据
            prepareChartData(data.records);
        });
}

// 切换页码
function changePage(direction) {
    // 根据传入的方向（1 为下一页，-1 为上一页）更新当前页码
    currentPage += direction;
    // 重新获取所有记录数据
    fetchAllRecords();
}

// 更新分页信息，包括显示当前页码和禁用/启用上一页、下一页按钮
function updatePagination() {
    // 更新当前页码显示
    document.getElementById('current-page').innerText = `第 ${currentPage} 页`;
    // 如果当前是第一页，禁用上一页按钮
    document.getElementById('prev-page').disabled = currentPage === 1;
    // 如果当前页是最后一页，禁用下一页按钮
    document.getElementById('next-page').disabled = currentPage * recordsPerPage >= totalRecords;
}

// 更新历史记录表格内容
function updateHistoryTable(records) {
    // 获取历史记录表格的 tbody 元素
    const tableBody = document.querySelector("#history-table tbody");
    // 清空表格内容
    tableBody.innerHTML = "";

    // 遍历每条记录，为每条记录创建一个表格行
    records.forEach(record => {
        // 打印记录数据，用于调试
        console.log(record);
        // 创建一个表格行元素
        const row = document.createElement("tr");
        const smokingMapping = {
            0: '从未吸烟',
            1: '正在吸烟',
            '-1': '曾经吸烟但已停止',
            3: '未知',
            2:'无信息'
        };
        const gender={
            0: '女',
            1: '男',
            2: '其他'
        }
        // 设置表格行的 HTML 内容，展示患者的各项信息
        row.innerHTML = `
            <td>${record[2]}</td>  <!-- 患者身份证号 -->
            <td>${record[1]}</td>  <!-- 用户姓名 -->
            <td>${record[3]}</td>  <!-- 时间 -->
            <td>${gender[record[4]]}</td>  <!-- 性别 -->
            <td>${record[10]}</td>  <!-- 年龄 -->
            <td>${record[7] === 0 ? '否' : '是'}</td>  <!-- 高血压 -->
            <td>${record[9] === 0 ? '否' : '是'}</td>  <!-- 心脏病 -->
            <td>${smokingMapping[record[12]]}</td>  <!-- 吸烟史 -->
            <td>${record[8]}</td>  <!-- BMI -->
            <td>${record[6]}</td>  <!-- 糖化血红蛋白 -->
            <td>${record[5]}</td>  <!-- 血糖 -->
            <td>${record[11] === 1 ? '糖尿病' : '正常'}</td>  <!-- 预测结果 -->
        `;
        // 将表格行添加到表格的 tbody 中
        tableBody.appendChild(row);
    });
}

// 准备用于绘制健康指标折线图的数据
function prepareChartData(records) {
    // 获取每条记录的身份证，作为图表的横坐标标签
    const labels = records.map(record => record[2]);
    // 获取每条记录的性别数据
    const genderData = records.map(record => record[4]);
    // 获取每条记录的血糖数据
    const bloodglucoseData = records.map(record => record[5]);
    // 获取每条记录的高血压数据
    const hypertensionData = records.map(record => record[7]);
    // 获取每条记录的吸烟史数据
    const smokingData = records.map(record => record[12]);
    // 获取每条记录的糖化血红蛋白数据
    const hba1cData = records.map(record => record[6]);
    // 获取每条记录的 BMI 数据
    const bmiData = records.map(record => record[8]);
    // 获取每条记录的年龄数据
    const ageData = records.map(record => record[10]);
    // 获取每条记录的心脏病数据
    const heartdiseaseData = records.map(record => record[9]);

    // 存储要显示的数据集
    const datasets = [];
    // 如果“性别”复选框被选中
    if (document.getElementById('show-gender').checked) {
        // 添加性别数据集到 datasets 数组
        datasets.push({
            label: '性别',
            data: genderData,
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false,
        });
    }

    // 如果“血糖”复选框被选中
    if (document.getElementById('show-bloodglucose').checked) {
        // 添加血糖数据集到 datasets 数组
        datasets.push({
            label: '血糖',
            data: bloodglucoseData,
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 2,
            fill: false,
        });
    }

    // 如果“高血压”复选框被选中
    if (document.getElementById('show-hypertension').checked) {
        // 添加血压数据集到 datasets 数组
        datasets.push({
            label: '高血压',
            data: hypertensionData,
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 2,
            fill: false,
        });
    }

    // 如果“吸烟史”复选框被选中
    if (document.getElementById('show-smoking').checked) {
        // 添加皮肤厚度数据集到 datasets 数组
        datasets.push({
            label: '吸烟史',
            data: smokingData,
            borderColor: 'rgba(255, 206, 86, 1)',
            borderWidth: 2,
            fill: false,
        });
    }

    // 如果“糖化血红蛋白”复选框被选中
    if (document.getElementById('show-hba1c').checked) {
        // 添加糖化血红蛋白数据集到 datasets 数组
        datasets.push({
            label: '糖化血红蛋白',
            data: hba1cData,
            borderColor: 'rgba(153, 102, 255, 1)',
            borderWidth: 2,
            fill: false,
        });
    }

    // 如果“BMI”复选框被选中
    if (document.getElementById('show-bmi').checked) {
        // 添加 BMI 数据集到 datasets 数组
        datasets.push({
            label: 'BMI',
            data: bmiData,
            borderColor: 'rgba(255, 159, 64, 1)',
            borderWidth: 2,
            fill: false,
        });
    }

    // 如果“年龄”复选框被选中
    if (document.getElementById('show-age').checked) {
        // 添加年龄数据集到 datasets 数组
        datasets.push({
            label: '年龄',
            data: ageData,
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false,
        });
    }

    // 如果“心脏病”复选框被选中
    if (document.getElementById('show-heartdisease').checked) {
        // 添加心脏病数据集到 datasets 数组
        datasets.push({
            label: '心脏病',
            data: heartdiseaseData,
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 2,
            fill: false,
        });
    }

    // 如果健康指标折线图已经存在，销毁它
    if (healthChart) {
        healthChart.destroy();
    }
    // 创建一个新的健康指标折线图实例
    healthChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: datasets,
        },
        options: {
            // 图表自适应大小
            responsive: true,
            scales: {
                y: {
                    title: {
                        // 显示 y 轴标题
                        display: true,
                        text: '数值'
                    },
                },
            },
            plugins: {
                legend: {
                    // 显示图例
                    display: true,
                    // 图例位置在顶部
                    position: 'top',
                },
            },
        },
    });
}

// 获取糖尿病患者和正常患者的统计数据，并绘制饼图
async function fetchDiabetesStats() {
    // 发送请求获取糖尿病统计数据
    const response = await fetch('/diabetes_stats');
    // 将响应数据解析为 JSON 格式
    const data = await response.json();

    // 如果糖尿病统计饼图已经存在，销毁它
    if (diabetesChart) {
        diabetesChart.destroy();
    }
    // 创建一个新的糖尿病统计饼图实例
    diabetesChart = new Chart(diabetesCtx, {
        type: 'pie',
        data: {
            labels: ['糖尿病患者', '正常患者'],
            datasets: [{
                data: [data.diabetic, data.normal],
                backgroundColor: ['rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)'],
                borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)'],
                borderWidth: 1
            }]
        },
        options: {
            // 图表自适应大小
            responsive: true,
            plugins: {
                legend: {
                    // 显示图例
                    display: true,
                    // 图例位置在顶部
                    position: 'top',
                },
                title: {
                    // 显示图表标题
                    display: true,
                    text: '糖尿病患者与正常患者统计',
                }
            }
        }
    });
}

// 获取正常患者和糖尿病患者各项指标的均值数据，并绘制雷达图
async function fetchDiabetesMeans() {
    // 发送请求获取糖尿病指标均值数据
    const response = await fetch('/diabetes_means');
    // 将响应数据解析为 JSON 格式
    const data = await response.json();

    // 如果雷达图已经存在，销毁它
    if (radarChart) {
        radarChart.destroy();
    }

    // 定义雷达图的标签
    const labels = ['性别', '血糖', '糖化血红蛋白','高血压', '心脏病', 'BMI', '年龄','吸烟史'];
    // 格式化正常患者各项指标的均值，保留两位小数
    const normalData = data.normal.map(mean => mean.toFixed(2));
    // 格式化糖尿病患者各项指标的均值，保留两位小数
    const diabeticData = data.diabetic.map(mean => mean.toFixed(2));

    // 创建一个新的雷达图实例
    radarChart = new Chart(radarCtx, {
        type: 'radar',
        data: {
            labels: labels,
            datasets: [
                {
                    label: '正常患者',
                    data: normalData,
                    backgroundColor: 'rgba(54, 162, 235, 0.6)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                },
                {
                    label: '糖尿病患者',
                    data: diabeticData,
                    backgroundColor: 'rgba(255, 99, 132, 0.6)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }
            ]
        },
        options: {
            // 图表自适应大小
            responsive: true,
            scales: {
                r: {
                    // 雷达图的径向轴从 0 开始
                    beginAtZero: true  ,
                    max: 200,
                }
            },
            plugins: {
                legend: {
                    // 显示图例
                    display: true,
                    // 图例位置在顶部
                    position: 'top',
                },
                title: {
                    // 显示图表标题
                    display: true,
                    text: '正常患者与糖尿病患者各项指标均值'
                }
            }
        }
    });
}
